<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>supercookie • progress</title>
        <meta name="author" content="Jonas Strehle"/>
        <meta name="robots" content="noindex"/>
        <meta name="viewport" content="viewport-fit=cover, user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
        <style>
            html, body {
                margin: 0px;
                width: 100%;
                height: 100%;
                padding: 0px;
                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: column;
                background-color: #202020;
                color: rgb(158, 158, 158);
                font-size: large;
                font-family: sans-serif;
                user-select: none;
            }
            img {
                width: 100px;
            }
            img:hover {
                transform: scale(1.01);
            }
            * {
                transition: all 0.4s;
            }
            b {
                color: orange;
            }
            .background {
                position: absolute;
                width: 100%;
                height: 100%;
                background-image: url(/assets/background.png);
                opacity: 0.05;
            }
            .button {
                width: 100px;
                height: 40px;
                text-align: center;
                display: flex;
                justify-content: center;
                z-index: 2;
                align-items: center;
                color: white!important;
                text-decoration: none!important;
                border-radius: 57px;
                background: linear-gradient(145deg, #1c1c1c, #212121);
                box-shadow:  20px 20px 60px #1a1a1a,
                            -20px -20px 60px #242424;
            }
            .button:hover {
                transform: scale(0.95);
            }
            .button:active {
                transform: scale(0.9);
            }
            .image-container {
                z-index: 2;
            }
        </style>
    </head>
    
    <body>
        <div class="background"></div>
        <a class="image-container" href="//{{url_main}}">
            <img src="/assets/404.png">
        </a>
        <p>
            <b>{{path}}</b> not found!
        </p>
        <a class="button" href="//{{url_main}}">
            Back
        </a>
    </body>
</html>